<template>
  <div class="departments">
    <el-card class="mycard">
      <!-- tabs 结构 -->
      <el-tabs>
        <el-tab-pane label="组织结构"></el-tab-pane>
      </el-tabs>
      <!-- 结构架构 -->
      <div class="box">
        <!-- 结构头部 -->
        <treetools
          :istop="true"
          :item="topitem"
          @opendialog="openAdd"
        ></treetools>
        <hr />
        <el-tree :data="list" default-expand-all>
          <!-- 放置组织结构组件  -->
          <treetools
            slot-scope="{ data }"
            :item="data"
            @updatedata="getDepartment"
            @opendialog="openAdd"
            @changeEditShow="openEdit"
          ></treetools>
        </el-tree>
        <!-- 弹窗对话框 -->
        <!-- 放置新增弹层组件  -->
        <adddept
          ref="addpanle"
          :showdialog="addshow"
          :currenObj="currenObj"
          @closepanpel="val => (addshow = val)"
          @updatedata="getDepartment"
        ></adddept>
      </div>
    </el-card>
  </div>
</template>

<script>
//导入获取结构接口
import { getDepartmentApi } from '@/api/departments'
export default {
  data () {
    return {
      // 设置给头部的数据源
      topitem: {
        label: '传智教育'
      },
      // 组织架构的数据源
      list: [],
      //定义控制窗体显示的变量addshow
      addshow: false, //显示与隐藏
      currenObj: {} //当前操作的部门对象
    }
  },
  methods: {
    // 打开新增面板
    openAdd (item) {
      this.addshow = true // 显示弹层
      this.currenObj = item //保存当前操作的部门对象
    },
    // 打开编辑面板
    openEdit (item) {
      this.addshow = true
      // 保存当前操作的部门对象
      this.currenObj = item
      //调用子组件的方法:根据id得到当前部门对象
      this.$refs.addpanle.getItem(item.id)
      // console.log(item.id)
    },
    // 获取组织架构数据
    async getDepartment () {
      // 发送网络请求
      const res = await getDepartmentApi()
      // console.log(res)
      // 保存数据源
      //调用生成动态结构树
      this.list = turnData(res.data.depts, '')
      // 保存顶部数据
      this.topitem = { ...res.data.depts[0], manager: '负责人' }

      // 定义一个方法完成结构树 (递归)
      function turnData (arr, pid) {
        //先声明一个数组
        let newarr = []
        //遍历数组
        arr.forEach(item => {
          //判断是否是一级
          if (item.pid === pid) {
            //进来就是一级//将一级的id和下一级的pid相等就是下一级
            let children = turnData(arr, item.id)
            //判断找没找到 找到就加入
            if (children.length >= 0) {
              item.children = children
            }
            newarr.push(item)
          }
        })
        return newarr
      }
    }
  },
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    adddept: () => import('./components/add-dept.vue')
  },
  created () {
    // 获取组织架构数据
    this.getDepartment()
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 30px;
  .mycard {
    padding: 30px;
  }
  .box {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
